<template>
    <el-dialog title="选择模板" :close-on-click-modal="false" :before-close="closeDailog" :visible.sync="visible">

        <div class="tablecontent">
            <!-- 表格表体 -->
            <ec-table :data="tabledata" @selection-change="handleSelectionChange" max-height="450">
                <el-table-column type="selection" header-align="center" align="center" width="50">
                </el-table-column>
                <el-table-column prop="templateName" header-align="center" align="center" show-overflow-tooltip
                    label="模板名称">
                </el-table-column>
                <el-table-column prop="templateSource" header-align="center" align="center" show-overflow-tooltip
                    label="模板参考来源">
                </el-table-column>
                <el-table-column prop="templateDesc" header-align="center" align="center" show-overflow-tooltip
                    label="模板描述">
                </el-table-column>
                <el-table-column prop="version" header-align="center" align="center" width="80" show-overflow-tooltip
                    label="版本">
                </el-table-column>
            </ec-table>
            <!-- 表格表尾 -->
            <ec-pagination class="pager" :page="page" @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </ec-pagination>

        </div>

        <span slot="footer" class="dialog-footer">
            <el-button @click="closeDailog()">取消</el-button>
            <el-button type="primary" :loading="submitLoading" @click="dataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
    import * as codegeneratetemplateService from '@/api/development/codegeneratetemplate'

    export default {
        data() {
            return {
                visible: false,
                submitLoading: false,
                tabledata: [],
                page: {
                    page: 1,
                    limit: 50,
                    total: 0
                },
            }
        },
        methods: {
            getDataTable() {
                codegeneratetemplateService.getCodeGenerateTemplatePage(this.page).then(
                    data => {
                        this.tabledata = data.list;
                        this.page.total = data.totalCount;
                    })
            },
            init() {
                this.visible = true
                this.$nextTick(() => {
                    this.getDataTable()
                })
            },
            // 表单提交
            dataFormSubmit() {
                this.$emit("callback",this.multipleSelection)
                this.closeDailog()
            },
            // 多选事件
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //切换页数
            handleSizeChange(val) {
                this.page.limit = val;
                this.getDataTable();
            },
            // 翻页
            handleCurrentChange(val) {
                this.page.page = val;
                this.getDataTable();
            },
            closeDailog() {
                this.multipleSelection= []
                this.visible = false
            },
        }
    }
</script>

<style scoped>
    .tablecontent {
        padding: 0px 20px 20px 20px;
    }

    .pager {
        width: 100%;
        text-align: center;
        margin: 10px auto;
    }
</style>